<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>出入码扫码枪</title>
    <link rel="stylesheet" href="static/weui/css/weui.css"/>
    <link rel="stylesheet" href="static/weui/css/weuix.css"/>
    <script src="static/weui/js/zepto.min.js"></script>
    <script src="static/weui/js/zepto.weui.js"></script>
    <script src="static/weui/js/llqrcode.js"></script>
    <script src="static/weui/js/gateway.js"></script>
    <script src="static/weui/js/methods.js"></script>
    <script src="static/weui/js/variable.js"></script>
    <style>
        #outdiv {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        #qr-canvas {
            display: none;
        }

        #scancode-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .scancode-tips-group {
            position: fixed;
            width: 300px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 200;
            color: #fff;
            font-size: 16px;
            text-align: center;
        }

        .tips {
            color: rgba(255, 255, 255, 0.4);
        }

        .upload-my-code {
            color: green;
            margin-top: 10px;
        }

        #v {
            height: 100vh;
        }
    </style>
</head>

<body ontouchstart>
<div class="weui-tab" style="height:auto;">
    <div class="weui-tab__panel">

        <!-----------------------------------------------------------------二维码扫码----------------------------------------------------------------->
        <div id="c0" class="weui-tab__content">

            <div id="scanDiv">
                <div id="mainbody" style="display: inline;">
                    <div id="outdiv" autoplay muted></div>
                </div>
                <canvas id="qr-canvas" width="400" height="400"></canvas>
                <canvas id="scancode-mask"></canvas>
                <div class="scancode-tips-group" id="scancode-tips-group">
                    <span class="tips" id="Codetip">请扫描出入码</span>
                </div>
            </div>

            <div id="codePanel">
                <div class="page-hd">
                    <h1 class="page-hd-title" id="memberInfo">

                    </h1>
                </div>

                <div class="weui-pay">
                    <h1 class="weui-pay-title">体温</h1>
                    <div class="weui-pay-input">
                        <input type="number" id="temperature" class="weui-pay-inputs" placeholder="体温"></div>
                    <div class="weui-pay-intro">请输入用户体温值</div>

                    <div class="weui-cells_radio" style="margin-top: 20px">
                        <h1 class="weui-pay-title">出入类型</h1>
                        <label class="weui-cell weui-check__label" for="x11">
                            <div class="weui-cell__bd">
                                <p>出</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input class="weui-check" name="entryType" id="x11" value="出" type="radio">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-check__label" for="x12">
                            <div class="weui-cell__bd">
                                <p>入</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input name="entryType" class="weui-check" id="x12" value="入" checked="checked" type="radio">
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>

                    <h1 class="weui-pay-title" style="margin-top: 20px">备注</h1>
                    <div class="weui-pay-input">
                        <textarea id="theRemark" class="weui-textarea" placeholder="请输入积分操作备注" rows="3"></textarea>
                    </div>

                    <div class="weui-pay-btn">
                        <a href="javascript:doCode();" class="weui-btn weui-btn_primary">录入系统</a>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="weui-tabbar tab-bottom">
        <a id="scanDo"  href="javascript:;" class="weui-tabbar__item">
						<span style="display: inline-block;position: relative;">
                        <i class="icon icon-86 f27 weui-tabbar__icon"></i>
					</span>
            <p class="weui-tabbar__label">扫一扫</p>
        </a>
    </div>
</div>

<script>
    $(function () {
        $("#codePanel").hide();
        $("#scanDiv").show();
        var name = '${(userKey.name)!}';
        if (name == '') {
            window.location.href = "login";
        }
        $('.weui-tab').tab({
            defaultIndex: 0,
            activeClass: 'weui-bar__item_on',
            onToggle: function (index) {
                if (index == 0) {
                    init();
                } else if (index == 1) {
                    //$("#c" + index).html("我是第2个1")
                }
            }
        })
    });

    function init() {
        $("#Codetip").html('请扫描出入码');
        qrcodeScanLoad(320, 400);
        setMask();
        if (document.body.clientWidth < 1025) {
            document.getElementById("scancode-tips-group").style.top =
                (document.body.clientHeight - document.body.clientWidth) / 2 +
                document.body.clientWidth * 0.9 -
                10 +
                "px";
        } else {
            document.getElementById("scancode-tips-group").style.top = "720px";
        }
    }

    function doCode() {
        var accountId = member.id;
        var temperature = $("#temperature").val();
        var remark = $("#theRemark").val();
        var entryType = $("input[name=entryType]:checked").val();
        if (temperature == null || temperature == '' || isNaN(temperature) || temperature < 33 || temperature > 50) {
            $.alert("请输入正确的体温值", "提示");
            return;
        }

        $.ajax({
            type: "post",
            url: 'api/record',
            data: 'accountId=' + accountId + '&entryType=' + entryType + '&remark=' + remark + '&temperature=' + temperature,
            async: false,
            timeout: 3000,
            success: function (res) {
                $.alert('操作成功', '提示');
                $("#theCode").val("");
                $("#theRemark").val("");
                $("#codePanel").hide();
                $("#scanDiv").show();
                $("#scanDo").click();
            },
            error: function (res) {
                $.alert("与服务器通信失败，请检查服务器端程序是否启动", "提示");
            }
        });
    }
</script>
</body>

</html>